<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <el-col :span="16">
          <div class="search-container">
            <search-form @search-submit="getArticleList">
              <search-input v-model="listQuery.id" placeholder="ID" />
              <search-input v-model="listQuery.title" placeholder="标题" />
              <search-select-tree
                v-model="selectCategory"
                :tree-data="categoryList"
                placeholder="栏目"
                @change="handleSelectCategory"
                @set-val="setVal"
              />
              <search-select-dict v-model="listQuery.type" :dict="articleTypeList" placeholder="文章类型" />
              <search-select-dict v-model="listQuery.status" :dict="articleStatusList" placeholder="状态" />
            </search-form>
          </div>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="handleCreateArticle">新增文章</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row>
      <el-table-column align="center" label="ID">
        <template slot-scope="{row}">
          <span>{{ row.article.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="标题">
        <template slot-scope="{row}">
          <span>{{ row.article.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="栏目">
        <template slot-scope="{row}">
          <span>{{ row.category.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="类型">
        <template slot-scope="{row}">
          <span>{{ row.article.type | typeFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态">
        <template slot-scope="{row}">
          <el-tag :type="row.article.status === 1 ? 'success' : 'info'">
            {{ row.article.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="发布时间">
        <template slot-scope="{row}">
          <span>{{ row.article.publishedTime | formatTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="阅读数">
        <template slot-scope="{row}">
          <span>{{ row.article.visitCount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="同级排序">
        <template slot-scope="{row}">
          <span>{{ row.article.sort }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="{row}">
          <span>{{ row.article.createdTime | formatTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="更新时间">
        <template slot-scope="{row}">
          <span>{{ row.article.updatedTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="360"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              title="编辑"
              @click="handleEditArticleRow(scope.row.article.id)"
            >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除"
              @click="handleDeleteArticleRow(scope.row.article.id)"
            >删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getArticleList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SearchForm from '@/components/SearchForm'
import SearchInput from '@/components/SearchForm/SearchInput'
import SearchSelectDict from '@/components/SearchForm/SearchSelectDict'
import SearchSelectTree from '@/components/SearchForm/SearchSelectTree'
import {
  articleList, articleDelete, articleTypes, articleStatus
} from '@/api/rest/cms/article'
import { mapState } from 'vuex'
import { categoryList } from '@/api/rest/cms/category'
import { formatDateTime } from '@/utils/formatdate'

let that
export default {
  name: 'ArticleList',
  components: { Pagination, SearchInput, SearchForm, SearchSelectDict, SearchSelectTree },
  filters: {
    statusFilter(status) {
      let name
      that.articleStatusList.filter(e => {
        if (e.value === status) {
          name = e.name
        }
      })
      return name
    },
    typeFilter(type) {
      let name
      that.articleTypeList.filter(e => {
        if (e.value === type) {
          name = e.name
        }
      })
      return name
    },
    formatTime(val) {
      if (val) {
        return formatDateTime(val)
      }
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: null,
        title: null,
        categoryId: null,
        categoryCodes: null,
        type: null,
        status: null,
        page: 1,
        limit: 10
      },
      selectCategory: null,
      dialogEditVisible: false,
      dialogCreateVisible: false,
      articleStatusList: [],
      articleTypeList: [],
      categoryList: []
    }
  },
  computed: {
    ...mapState({
      publicKey: (state) => state.user.publicKey
    })
  },
  beforeCreate() {
    that = this
  },
  created() {
    this.getArticleList()
  },
  methods: {
    setVal(val) {
      this.listQuery.categoryId = val
    },
    getArticleList() {
      this.listLoading = true
      categoryList(this.listQuery).then(response => {
        this.categoryList = response.data
      })
      articleStatus().then(response => {
        this.articleStatusList = response.data
      })
      articleTypes().then(response => {
        this.articleTypeList = response.data
      })
      articleList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleEditArticleRow(id) {
      this.$router.push({ path: '/cms/article/detail', query: { detailId: id }})
    },
    handleDeleteArticleRow(id) {
      this.$confirm('此操作将删除文章, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        articleDelete(id).then(() => {
          this.$message({
            type: 'success',
            message: '删除文章成功'
          })
          this.getArticleList()
        }).catch(() => {
        })
      })
    },
    handleCreateArticle() {
      this.$router.push({ path: '/cms/article/detail', query: { detailId: null }})
    },
    handleCreateFormDialogClose() {
      this.$refs.createForm.clearValidate()
    },
    handleEditFormDialogClose() {
      this.$refs.editForm.clearValidate()
    },
    handleSelectCategory(e) {
      this.listQuery.categoryCodes = e.code
    }
  }
}
</script>
<style scoped>
</style>

